<template>
    <div>
        <div class="boxWrapper tabbox">
            <el-tabs v-model="currentName">
                <el-tab-pane label="电站列表" name="1">
                        <span slot="label"><i class="iconfont">&#xe7a8;</i> 电站列表</span>
                </el-tab-pane>
                <el-tab-pane label="采集列表" name="2">
                        <span slot="label"><i class="iconfont">&#xe855;</i> 采集列表</span>
                </el-tab-pane>
                <el-tab-pane label="采集设置" name="3">
                        <span slot="label"><i class="iconfont">&#xe603;</i> 采集设置</span>
                </el-tab-pane>
            </el-tabs>
        </div>    
        <div class="table-content boxWrapper">
            <el-select v-model="basinId" placeholder="请选择" size="small" @change="handleChangeBasin" style="margin-bottom: 10px;">
                <el-option
                    v-for="item in basinSelect"
                    :key="item.id"
                    :label="item.basinName"
                    :value="item.id"
                    >
                </el-option>
            </el-select>
            <el-table :data="stationData" border height="calc(100vh - 250px)">
                <el-table-column prop="stationName" label="电站" align="center">
                </el-table-column>
                <el-table-column prop="startTime" label="绑定状态" align="center">
                <template slot-scope="scope">
                    <el-link v-if="scope.row.bindNum == 0" type="warning" :underline="false" @click="handleBind(scope.row)">立即绑定</el-link>
                    <el-link v-else type="primary" :underline="false" @click="handleBindingList(scope.row)">已绑定({{ scope.row.bindNum }})</el-link>
                </template>
                </el-table-column>
                <el-table-column prop="maxRunSeconds" label="状态" align="center">
                <template slot-scope="scope">
                    <el-link  type="success" :underline="false">在线({{ scope.row.onlineNum }})</el-link> 
                    <el-link  type="danger" :underline="false" style="margin-left: 10px;">离线({{ scope.row.offlineNum }})</el-link>
                </template>
                </el-table-column>
                <el-table-column prop="collectionInterval" label="采集间隔时间（秒）" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-input-number placeholder="请输入采集间隔(秒)" v-model="scope.row.collectionInterval" 
                    size="small" 
                    @change="handleSetTask(scope.row)" 
                    ></el-input-number>
                </template>
                </el-table-column>
            </el-table>
        </div>







        <el-dialog title="客户端绑定" :visible.sync="unbindingDialogVisible" width="1000px"  v-dialogDrag :before-close="handleCancelUnBinding">
        <el-table :data="unbindingList" height="calc(100vh - 400px)" border highlight-current-row @current-change="handleCurrentChange">
            <el-table-column prop="name" label="自定义备注" align="center">
                <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入内容" size="small" v-if="scope.row.showInput"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="onlineStatus" label="状态" align="center">
                <template slot-scope="scope">
                <el-tag  type="success" size="small" v-if="scope.row.onlineStatus == 1">在线</el-tag> 
                <el-tag  type="danger" size="small" v-if="scope.row.onlineStatus == 0">离线</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="wanIp" label="公网IP" align="center">
            </el-table-column>
            <el-table-column prop="lanIp" label="内网IP" align="center">
            </el-table-column>
            <el-table-column prop="clientId" label="客户端ID" align="center">
            </el-table-column>
            </el-table>
            <div class="dialog-footer">
                <el-button size="small" icon="el-icon-close" @click="handleCancelUnBinding" round class="cancel-btn">取消</el-button>
                <el-button type="primary" size="small" icon="el-icon-check" @click="handleConfirmUnBinding" round class="confirm-btn">保存配置</el-button>
            </div>
        </el-dialog>

        <el-dialog title="已绑定客户端" :visible.sync="bindingDialogVisible" width="1000px"  v-dialogDrag>
        <el-table :data="bindingList" style="width: 100%" height="calc(100vh - 400px)" border highlight-current-row @current-change="handleCurrentChange">
          <el-table-column prop="name" label="备注" align="center">
          </el-table-column>
          <el-table-column prop="onlineStatus" label="状态" align="center">
            <template slot-scope="scope">
              <el-link  type="danger" :underline="false" v-if="scope.row.onlineStatus == 0">离线</el-link> 
              <el-link  type="success" :underline="false" v-if="scope.row.onlineStatus == 1">在线</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="bindTime" label="绑定时间" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column prop="wanIp" label="公网IP" align="center">
          </el-table-column>
          <el-table-column prop="lanIp" label="内网IP" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-link type="danger" icon="el-icon-delete" @click="handleDelBind(scope.row)" :underline="false">解绑</el-link>
                  <el-link  v-if="scope.row.clientOnline != 1 && scope.row.clientOnline != 0" icon="el-icon-tickets" @click="handleOnLineList(scope.row)" :underline="false" type="primary">上线记录</el-link>
                </template>
              </el-table-column>
        </el-table>
      </el-dialog>

      <el-dialog title="客户端上线记录" :visible.sync="onLineDialogVisible" width="1000px"  v-dialogDrag>
        <el-table :data="onLineList" style="width: 100%" height="calc(100vh - 400px)" border>
          <el-table-column prop="etime" label="时间" align="center"></el-table-column>
          <el-table-column prop="content" label="内容" align="center">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import {GetAllBasin,DaStationList,setTaskInterval,UnBindingStationList,DaBinding,DabindingList,DaClientRecord,DaUnbinding} from '@/api/https'
export default {
    data() {
        return {
            currentName:'1',
            basinId:'',
            basinSelect:[],
            stationData:[],
            stationId:'',
            unbindingList:[],
            unbindingDialogVisible:false,
            bindingDialogVisible:false,
            bindingList:[],
            onLineDialogVisible:false,
            onLineList:[]
        }
    },
    mounted(){
        bus.$emit('showBasin', false);
        this.getAllBasin()
    },
    activated(){
        bus.$emit('showBasin', false);
    },
    methods:{
        getAllBasin(){
            GetAllBasin({
                ORGID:0,
            }).then(res=>{
                if(res.isSuccess){
                    this.basinSelect = res.data
                    this.basinId = res.data[0].id
                    this.basinIdRecord = res.data[0].id
                    this.getStationData()
                }
            })
        },
        handleChangeBasin(val){
            this.basinId = val
            this.getStationData()
        },
        getStationData(){
            DaStationList({
                basinId:this.basinId,
                page:1,
                size:50
            }).then(res=>{
                if(res.code == 200){
                    this.stationData = res.data.list || []
                }
            })
        },
        handleSetTask(data){
            setTaskInterval({
                stationId:data.stationId,
                collectionInterval:data.collectionInterval
            }).then(res=>{
                if(res.code == 200){
                    this.$message.success('采集间隔时间设置成功！')
                    this.getStationData()
                }else{
                    this.getStationData()
                    this.$message.error(res.msg)
                }
            })
        },
        handleBind(data){
            UnBindingStationList({
                stationId:data.stationId
            }).then(res=>{
                if(res.code == 200){
                    const list = []
                    if(res.data && res.data.length > 0){
                        res.data.forEach(item=>{
                            const _d = {...item}
                            _d.showInput = false
                            _d.stationId = data.stationId
                            list.push(_d)
                        })
                    }
                    this.unbindingList = [...list]
                    this.unbindingDialogVisible = true
                }
            })
        },
        handleCancelUnBinding(){
            this.unbindingList = []
            this.unbindingDialogVisible = false
        },
        handleConfirmUnBinding(){
            const selectBindData = this.unbindingList.filter(item=>{return item.showInput})
            if(selectBindData.length > 0 ){
                DaBinding({
                    clientId:selectBindData[0].clientId,
                    stationId:selectBindData[0].stationId,
                    name:selectBindData[0].name
                }).then(res=>{
                    if(res.code == 200){
                        this.handleCancelUnBinding()
                        this.getStationData()
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }else{
                this.$message.error('请选择要绑定的数据')
            }
        },
        handleCurrentChange(data){
            this.unbindingList.forEach(item=>{
                if(item.clientId == data.clientId){
                    item.showInput = true
                }else{
                    item.showInput = false
                }
            })
        },
        handleBindingList(data){
            DabindingList({
                stationId:data.stationId
            }).then(res=>{
                if(res.code == 200){
                    this.bindingList = res.data
                    this.bindingDialogVisible = true
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handleOnLineList(data){
            DaClientRecord({
                clientId:data.clientId,
                page:1,
                size:500
            }).then(res=>{
                if(res.code == 200){
                    this.onLineList = res.data.list
                    this.onLineDialogVisible = true
                }
            })
        },
        handleDelBind(data){
            this.$confirm(`确认解除 ${data.name} 的绑定？`,'提示',{
                type:'warning'
            }).then(() => {
                DaUnbinding({
                    clientId:data.clientId
                }).then(res=>{
                    if(res.code == 200){
                        this.getStationData()
                        this.handleBindingList(data)
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }).catch(() => {}); 
        },
    }
}
</script>

<style scoped>
.table-content{
    padding: 10px;
    margin-top: 10px;
}
</style>